<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<!--页面访问路径 localhost:8888/page/shopcart/cart -->
<!--购物车页面 购物车页面 购物车页面 购物车页面 购物车页面 购物车页面 购物车页面 购物车页面 -->
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>京夕夕商城--购物车页面</title>

    <link rel="stylesheet" type="text/css" href="/css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="/css/pages-cart.css"/>
    <script src="/js/vue/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/common.js"></script>
</head>
<body>
<div id="cartApp">

    <div class="top">
        <shortcut/>
    </div>

    <div class="cart py-container">

        <!--logoArea-->
        <div class="logoArea">
            <div class="fl logo"><span class="title">购物车</span></div>
        </div>

        <!--All goods-->
        <div class="allgoods">
            <h4>全部商品</h4>
            <div class="cart-main">
                <div class="yui3-g cart-th">
                    <div class="yui3-u-1-4"><input type="checkbox" @click="selectAll()" :checked="CarItemVOlist.length===allSelectedCarItemVOlist.length&&CarItemVOlist.length"> 全部</div>
                    <div class="yui3-u-1-4">商品</div>
                    <div class="yui3-u-1-8">单价（元）</div>
                    <div class="yui3-u-1-8">数量</div>
                    <div class="yui3-u-1-8">小计（元）</div>
                    <div class="yui3-u-1-8">操作</div>
                </div>



                <!--商品物品-->
                <div class="cart-item-list" id="{{CarItemVO.itemId}}"  >
                    <div class="CarItemVO"  v-for="(CarItemVO,k) in CarItemVOlist" v-show="CarItemVOlist.length!==0">
                        <div class="cart-list">
                            <ul class="goods-list yui3-g">
                                <li class="yui3-u-1-24" >
                                    <input type="checkbox" @click="selectSingle(k)" :value="CarItemVO.itemId"
                                                       :checked="allSelectedCarItemVOlist.indexOf(CarItemVO.itemId)>=0" >
                                </li>

                                <li class="yui3-u-11-24" >
                                    <div class="good-item">
                                        <div class="item-img"><img src="/img/goods.png" width="80px" height="80px"/></div>
                                        <div class="item-msg">
												<span style="line-height:70px ">
													{{CarItemVO.itemTitle}}
												</span>
                                        </div>
                                    </div>
                                </li>

                                <li class="yui3-u-1-8"><span style="line-height:70px " class="price">{{CarItemVO.itemPrice}}</span></li>
                                <li class="yui3-u-1-8" style="padding-top: 20px" >
                                    <a href="javascript:void(0)" class="increment mins" id="decrement" @click="changeNum(k,CarItemVO.shopcartNum,-1)">-</a>
                                    <input type="text"  minnum="1" class="itxt"   v-model="CarItemVO.shopcartNum" />
                                    <a href="javascript:void(0)" class="increment plus" id="increment" @click="changeNum(k,CarItemVO.shopcartNum,1)">+</a>
                                </li>
                                <li class="yui3-u-1-8"><span style="line-height:70px " class="sum" id="subtotal()">{{(CarItemVO.itemPrice * CarItemVO.shopcartNum).toFixed(2)}}</span></li>
                                <li class="yui3-u-1-8">
                                    <a href="#none" v-on:click="deleteId(CarItemVO.itemId)">删除</a><br />
                                    <a href="#none" onclick="deleteId/itemList.itemId">移到我的关注</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--商品结束-->
                <!--商品结束-->
            </div>
            <div class="cart-tool">
                <div class="option">
                    <a href="#none" v-on:click="itemIDdelete()">删除选中的商品</a>
                    <a href="#none">移到我的关注</a>
                    <a href="#none">清除下柜商品</a>
                </div>
                <div class="toolbar">
                    <div class="toolbar">
                        <div class="chosed">已选择<span id="count">{{totalCount}}</span>件商品</div>
                        <div class="sumprice">
                            <span><em>总价（不含运费） ：</em><i id="total">{{totalPrice}}</i></span><br/>
                            <span><em>已节省：</em><i>-¥0.00</i></span>
                        </div>
                        <div class="sumbtn">
                            <a class="sum-btn" href="../getOrderInfo.html" target="_self">结算</a>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
                <div class="deled">
                    <span>已删除商品，您可以重新购买或加关注：</span>
                    <div class="cart-list del">
                        <ul class="goods-list yui3-g">
                            <li class="yui3-u-1-2">
                                <div class="good-item">
                                    <div class="item-msg">Apple Macbook Air 13.3英寸笔记本电脑 银色（Corei5）处理器/8GB内存</div>
                                </div>
                            </li>
                            <li class="yui3-u-1-6"><span class="price">8848.00</span></li>
                            <li class="yui3-u-1-6">
                                <span class="number">1</span>
                            </li>
                            <li class="yui3-u-1-8">
                                <a href="#none">重新购买</a>
                                <a href="#none">移到我的关注</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="liked">
                    <ul class="sui-nav nav-tabs">
                        <li class="active">
                            <a href="#index" data-toggle="tab">猜你喜欢</a>
                        </li>
                        <li>
                            <a href="#profile" data-toggle="tab">特惠换购</a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="tab-content">
                        <div id="index" class="tab-pane active">
                            <div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel slide">
                                <div class="carousel-inner">
                                    <div class="active item">
                                        <ul>
                                            <li>
                                                <img src="/img/like1.png"/>
                                                <div class="intro">
                                                    <i>Apple苹果iPhone 6s (A1699)</i>
                                                </div>
                                                <div class="money">
                                                    <span>$29.00</span>
                                                </div>
                                                <div class="incar">
                                                    <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                            class="car"></i><span class="cartxt">加入购物车</span></a>
                                                </div>
                                            </li>
                                            <li>
                                                <img src="/img/like2.png"/>
                                                <div class="intro">
                                                    <i>Apple苹果iPhone 6s (A1699)</i>
                                                </div>
                                                <div class="money">
                                                    <span>$29.00</span>
                                                </div>
                                                <div class="incar">
                                                    <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                            class="car"></i><span class="cartxt">加入购物车</span></a>
                                                </div>
                                            </li>
                                            <li>
                                                <img src="/img/like3.png"/>
                                                <div class="intro">
                                                    <i>Apple苹果iPhone 6s (A1699)</i>
                                                </div>
                                                <div class="money">
                                                    <span>$29.00</span>
                                                </div>
                                                <div class="incar">
                                                    <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                            class="car"></i><span class="cartxt">加入购物车</span></a>
                                                </div>
                                            </li>
                                            <li>
                                                <img src="/img/like4.png"/>
                                                <div class="intro">
                                                    <i>Apple苹果iPhone 6s (A1699)</i>
                                                </div>
                                                <div class="money">
                                                    <span>$29.00</span>
                                                </div>
                                                <div class="incar">
                                                    <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                            class="car"></i><span class="cartxt">加入购物车</span></a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="item">
                                        <ul>
                                            <li>
                                                <img src="/img/like1.png"/>
                                                <div class="intro">
                                                    <i>Apple苹果iPhone 6s (A1699)</i>
                                                </div>
                                                <div class="money">
                                                    <span>$29.00</span>
                                                </div>
                                                <div class="incar">
                                                    <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                            class="car"></i><span class="cartxt">加入购物车</span></a>
                                                </div>
                                            </li>
                                            <li>
                                                <img src="/img/like2.png"/>
                                                <div class="intro">
                                                    <i>Apple苹果iPhone 6s (A1699)</i>
                                                </div>
                                                <div class="money">
                                                    <span>$29.00</span>
                                                </div>
                                                <div class="incar">
                                                    <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                            class="car"></i><span class="cartxt">加入购物车</span></a>
                                                </div>
                                            </li>
                                            <li>
                                                <img src="/img/like3.png"/>
                                                <div class="intro">
                                                    <i>Apple苹果iPhone 6s (A1699)</i>
                                                </div>
                                                <div class="money">
                                                    <span>$29.00</span>
                                                </div>
                                                <div class="incar">
                                                    <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                            class="car"></i><span class="cartxt">加入购物车</span></a>
                                                </div>
                                            </li>
                                            <li>
                                                <img src="/img/like4.png"/>e
                                                <div class="intro">
                                                    <i>Apple苹果iPhone 6s (A1699)</i>
                                                </div>
                                                <div class="money">
                                                    <span>$29.00</span>
                                                </div>
                                                <div class="incar">
                                                    <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                            class="car"></i><span class="cartxt">加入购物车</span></a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
                                <a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
                            </div>
                        </div>
                        <div id="profile" class="tab-pane">
                            <p>特惠选购</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <script>
        var vue = new Vue({
            el: "#cartApp",
            data: {
                CarItemVOlist:[],
                //控制全选
                allChecked: true,
                //存放被选择的数据
                allSelectedCarItemVOlist: []
            },
            computed:{
                //totalPrice计算总价
                totalPrice() {
                    var totalprice = 0;
                    //未加入选择框时的计算总价
                    /*
                        //方法一
                      /!*  for(var i=0;i<this.goods.length;i++){
                          totalprice += this.goods[i].num*this.goods[i].price
                        }*!/
                        //方法二
                        this.goods.forEach( (v,k)=>{
                          totalprice += v.num*v.price;
                        });*/
                    //加入选择框以后的计算总价
                    this.CarItemVOlist.forEach((CarItemVO, k) => {
                        if (this.allSelectedCarItemVOlist.indexOf(CarItemVO.itemId) !== -1) {
                            totalprice += CarItemVO.itemPrice * CarItemVO.shopcartNum;
                        }
                    });
                    return totalprice
                }
            },
            methods: {
                //增减数量
                changeNum(k, shopcartNum, type) {
                    //如果是减少，要判断>1，最少是1
                    if (type === -1) {
                        if (this.CarItemVOlist[k].shopcartNum > 1) {
                            this.CarItemVOlist[k].shopcartNum = this.CarItemVOlist[k].shopcartNum + type;
                        }
                    }
                    else {
                        this.CarItemVOlist[k].shopcartNum = this.CarItemVOlist[k].shopcartNum + type;
                    }
                },
                //点击全选按钮
                selectAll() {
                    //event.currentTarget.checked表示点击完后该选择框的状态
                    if (!event.currentTarget.checked) {
                        this.allSelectedCarItemVOlist = [];
                    } else {
                
                        this.allSelectedCarItemVOlist = [];//先置空，然后再重新添加，不然数组里会有重复！因为有可能点击全选之前已经选择了几个单选按钮。也就是数组里已经添加过了对应的id。
                        this.CarItemVOlist.forEach((CarItemVO, k) => {
                            this.allSelectedCarItemVOlist.push(CarItemVO.itemId)
                        })
                    }
                    console.log(this.allSelectedCarItemVOlist)
                },
                //点击单选按钮
                selectSingle(k) {

                    if (event.currentTarget.checked) {
                        this.allSelectedCarItemVOlist.push(this.CarItemVOlist[k].itemId)
                    } else {
                        for (var i = 0; i < this.allSelectedCarItemVOlist.length; i++) {
                            if (this.CarItemVOlist[k].itemId === this.allSelectedCarItemVOlist[i]) {
                                this.allSelectedCarItemVOlist.splice(i, 1);
                                this.allChecked = false;
                                break;
                            }
                        }
                    }
                    console.log(this.allSelectedCarItemVOlist)
                },
                findCart: function () {
                    let url = "/findCartListUserById";
                    axios.get(url)
                        .then(function (result) {
                            debugger;
                            this.vue.CarItemVOlist = result.data;
                            console.log(result.data);
                        })
                        .catch();
                },
                itemIDdelete:function(){
                debugger;
                    if (!confirm("确认删除吗")) {
                        window.event.returnValue = false;
                    }else{
                    var boxes = document.getElementsByTagName("input");
                    var arr=[];
                    for(i=0;i<boxes.length;i++){
                        if(boxes[i].checked==true){
                            arr.push(boxes[i].value);
                        }
                        let url="/deleteItemIds/"+arr
                        axios.post(url).then(function (){
                            //this.CarItemVOlist.splice(k, 1);
                            //console.log(this.allSelectedCarItemVOlist);
                            location.reload();
                        })
                    }
                    alert(arr);
                    }
                },
                deleteId:function(id){
                    alert(id);
                    debugger;
                    let url ="deleteItemId/"+id;
                    axios.post(url).then(function (){
                        console.log("删除成功");
                    })
                    location.reload();
                },
                //删除购物车元素
                //删除是一定也要记得从allSelectGoods数组中删除对应的id
                del(k) {
                    debugger;
                    if (!confirm("确认删除吗")) {
                        window.event.returnValue = false;
                    }
                    else {
                        //如果该条信息已被选中    2223,22312,223,ngh                                   223
                        if(this.allSelectedCarItemVOlist.indexOf(this.CarItemVOlist[k].itemId)!==-1){
                            var index = this.allSelectedCarItemVOlist.indexOf(this.CarItemVOlist[k].itemId);
                            this.allSelectedCarItemVOlist.splice(index,1);
                        }
                        this.allSelectedCarItemVOlist.splice(index,1);//删除
                        this.CarItemVOlist.splice(k, 1);//删除
                        console.log(this.allSelectedCarItemVOlist)
                    }
                }
                /*//批量删除
                delSelect() {
                    if (confirm("确认删除" + this.allSelectedCarItemVOlist.length + "条信息吗？")) {
                        for(var i=this.CarItemVOlist.length-1;i>=0;i--){
                            if (this.allSelectedCarItemVOlist.indexOf(this.CarItemVOlist[i].itemId)!==-1) {
                                //从allSelectedGoods数组中也需要删除
                                var index = this.allSelectedCarItemVOlist.indexOf(this.CarItemVOlist[i].itemId);
                                this.allSelectedCarItemVOlist.splice(index,1);
                                //删除goods数组中的信息
                                /!*var index = this.goods.indexOf(v.id);*!/
                                this.CarItemVOlist.splice(i,1);
                            }
                        }
                        //这种写法是错误的，因为数组每次删除一条数据以后索引值会发生变化，所以用上述的倒叙删除，先删除索引大的数据
                        /!* this.goods.forEach((v, k) => {
                             if (this.allSelectedGoods.indexOf(v.id)!==-1) {
                             //从allSelectedGoods数组中也需要删除
                                 var index = this.allSelectedGoods.indexOf(this.goods[k].id);
                                 this.allSelectedGoods.splice(index,1);
                             //删除goods数组中的信息
                                /!*var index = this.goods.indexOf(v.id);*!/
                                console.log(k);
                                 this.goods.splice(k,1);
                             }
                         });*!/
                    }
                    console.log(this.allSelectedCarItemVOlist)
                }*/
            },
            mounted: function () {
                this.findCart();
                // this.findNum();
                //this.itemIDdelete();
            }
        })


    </script>
    <!-- 底部栏位 -->
    <!--页面底部，由js动态加载-->
    <script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
    <div class="clearfix footer"></div>
    <script type="text/javascript">$(".footer").load("/page/foot");</script>
    <!--页面底部END-->
    <script type="text/javascript" src="/js/plugins/jquery.easing/jquery.easing.min.js"></script>
    <script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script>
    <script type="text/javascript" src="/js/widget/nav.js"></script>
</body>
</html>